<template>
  <j-modal
    :title="title"
    width="800px"
    :visible="visible"
    switchFullscreen
    centered
    @cancel="onCancel"
    @ok="onOk"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="公告标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
              <a-input v-model="model.title" placeholder="请输入公告标题" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="字体名称" :labelCol="{ span: 10 }" :wrapperCol="{ span: 12 }" prop="fontName">
              <a-select v-model="model.fontName" placeholder="请选择字体名称">
                <a-select-option v-for="o of fontNameOptions" :key="o.code" :value="o.code">{{
                  o.name
                }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="字体颜色" :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }" prop="fontColor">
              <div class="color_box">
                <div class="color_display" :style="calculateFontColorDisplay"></div>
                <a-popover>
                  <a-button type="primary">选择颜色</a-button>
                  <template slot="content">
                    <Color v-model="colors.text_hex" @input="changeFontColor" />
                  </template>
                </a-popover>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="字体大小(px)" :labelCol="{ span: 10 }" :wrapperCol="{ span: 12 }" prop="fontSize">
              <a-input-number
                style="width: 190px"
                placeholder="请输入字体大小"
                v-model="model.fontSize"
                :min="12"
                :max="100"
              ></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="背景颜色" :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }" prop="fontColor">
              <div class="color_box">
                <div class="color_display" :style="calculateBgColorDisplay"></div>
                <a-popover>
                  <a-button type="primary">选择颜色</a-button>
                  <template slot="content">
                    <Color v-model="colors.bg_hex" @input="changeBgColor" />
                  </template>
                </a-popover>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="公告内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content">
              <a-textarea
                :style="contentStyle"
                class="content_textarea"
                placeholder="请输入公告内容"
                v-model="model.content"
              ></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
import { Compact } from 'vue-color'
export default {
  name: 'AddProgramModal',
  components: { Color: Compact },
  data() {
    return {
      title: '新增',
      confirmLoading: false,
      visible: false,
      model: {
        fontColor: '',
        bgColor: '',
      },
      validatorRules: {
        title: [{ required: true, message: '请输入公告标题!' }],
        content: [{ required: true, message: '请输入公告内容!' }],
      },
      url: {
        add: '/corp/bulletin/add',
        edit: '/corp/bulletin/edit',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      // 其他参数
      fontNameOptions: [
        { name: 'Times New Roman', code: 'Times New Roman' },
        { name: 'Arial', code: 'Arial' },
        { name: '宋体', code: 'SimSun' },
        { name: '新宋体', code: 'NSimSun' },
        { name: '黑体', code: 'SimHei' },
        { name: '楷体', code: 'KaiTi' },
      ],
    }
  },
  methods: {
    init() {
      this.model = {
        fontColor: '',
        bgColor: '',
      }
      this.visible = true
    },
    edit(record) {
      const fontColor = record.fontColor.substring(4, record.fontColor.length)
      const bgColor = record.bgColor.substring(4, record.bgColor.length)
      this.model = Object.assign({}, {
        ...record,
        fontColor: fontColor.includes('#') ? fontColor : `#${fontColor}`,
        bgColor: bgColor.includes('#') ? bgColor : `#${bgColor}`,
      })
      this.visible = true
    },
    // 更改字体颜色
    changeFontColor({ hex }) {
      this.model.fontColor = hex
    },
    changeBgColor({ hex }) {
      this.model.bgColor = hex
    },
    onOk() {
      const that = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          const param = {
            ...this.model,
            fontColor: this.model.fontColor ? `0x${this.model.fontColor.replace('#', 'FF')}` : '',
            bgColor:  this.model.bgColor ? `0x${this.model.bgColor.replace('#', 'FF')}` : '',
          }
          httpAction(httpurl, param, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                this.visible = false
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    onCancel() {
      this.visible = false
      this.$refs.form.resetFields()
    },
  },
  computed: {
    colors() {
      return {
        text_hex: this.model.fontColor,
        bg_hex: this.model.bgColor,
      }
    },
    // 字体颜色display
    calculateFontColorDisplay() {
      return {
        background: this.model.fontColor,
      }
    },
    // 背景颜色display
    calculateBgColorDisplay() {
      return {
        background: this.model.bgColor,
      }
    },
    // 公告内容样式
    contentStyle() {
      return {
        background: this.model.bgColor,
        fontSize: this.model.fontSize + 'px',
        fontFamily: this.model.fontName,
        color: this.model.fontColor,
      }
    },
  },
}
</script>

<style lang="less" scoped>
.content_textarea {
  height: 270px;
}
.color_box {
  display: flex;
  align-items: center;
  .color_display {
    width: 40px;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-right: 15px;
  }
}
</style>